<extend name="./public/frame.html"/>
<block name="content">
    <blockquote class="layui-elem-quote search">
        <div class="layui-inline">
            <select name="province_id" id="province_id" class="layui-input" lay-filter="province" style="width: 120px;" onclick="getProvinceList();">
                <option value="">请选择省份</option>
                <?php foreach($provinceList as $key=>$value):?>
                <option value="<?php echo $value['region_id'];?>"><?php echo $value['region_name'];?></option>
                <?php endforeach;?>
            </select>
        </div>
        <div class="layui-inline">
            <select name="city_id" id="city_id" class="layui-input" lay-filter="city_id" style="width: 120px;">
                <option value="">请选择城市</option>
            </select>
        </div>
        <div class="layui-inline">
            <input type="text" class="layui-input" placeholder="姓名" value="" id="driver_name" style="width: 120px;">
        </div>
        <div class="layui-inline">
            <input type="text" class="layui-input" placeholder="手机号码" value="" id="driver_phone" style="width: 150px;">
        </div>
        <div class="layui-inline">
            <button class="layui-btn" data-type="search" id="searchs">搜索</button>
        </div>
    </blockquote>
    <table class="layui-table" style="width: 50%;float: left;margin-top: -0.5px;border: 3px solid white;">
        <tr>
            <td>
                司机人数：<span style="color: green" class="driverNum">查询中....</span><span class="number"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                接单中：<span class="takeOrderNumber">0</span>&nbsp;人&nbsp;&nbsp;&nbsp;&nbsp;
                行程中：<span class="tripNumber">0</span>&nbsp;人
            </td>
        </tr>
        <tr>
            <td>
                <div id="container" class="container" style="width: auto; height: 600px; margin: 0 auto"></div>
            </td>
        </tr>
    </table>
    <input type="hidden" value="" id="highLight"  data-value="{$highLight}">
    <table class="layui-table" lay-data="{width:'auto', height:'auto', url:'{:url('DriverLator/driverList2')}', page: true, limit: 10, id:'DriverLator'}" lay-filter="DriverLator" style="width: 49%;float: right;">
        <thead>
        <tr>
            <th lay-data="{field:'driverId', width:80,align:'center'}">司机ID</th>
            <th lay-data="{field:'name', width:80,align:'center'}">姓名</th>
            <th lay-data="{field:'driver_phone', width:150,align:'center'}">手机号</th>
            <th lay-data="{field:'addressName', width:220,align:'center'}">地理位置</th>
            <th lay-data="{field:'time', width:120,align:'center'}">逗留时间</th>
            <th lay-data="{field:'orderCount', width:100,align:'center'}" lay-even="order">附近订单</th>
            <th lay-data="{field:'driver_status', width:100,align:'center'}">司机状态</th>
            <th lay-data="{field:'takeOrderNumber', width:100,align:'center'}">异常单量</th>
            <th lay-data="{width:180,align:'center',toolbar: '#barDemo'}">操作</th>
        </tr>
        </thead>
    </table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="detail">位置</a>
        <!--<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="msg">短信</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="detail">封禁</a>-->
    </script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=6d834de96b8b89cdaa744cf1558226e3"></script>
    <script src="https://webapi.amap.com/loca?v=1.3.2&key=6d834de96b8b89cdaa744cf1558226e3"></script>
    <script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script>
    <script>
        var num = 1;
        //GetQueryString
        layui.use(['table'], function () {
            var table = layui.table;
            table.on('tool(DriverLator)', function (obj) {
                var data = obj.data;
                var id = data.driverId;
                var lat = data.lat;
                var lng = data.lng;
                if (obj.event === 'detail') {
                    $('#highLight').data('value',id);
                    var value=$("#highLight").data('value')
                    window.location.href="{:url('/admin/DriverLator/translator2')}?drivetType="+2+"&id="+value;
                }else if(obj.event === 'msg'){
                    $.post("{:url('admin/DriverLator/sendMsg')}",{id:id},function(data){
                    },'json');
                }else if (obj.event === 'order') {
                    layer.open({
                        type: 2,
                        title: '优惠券列表',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/AdminActivity/couponList","admin_activity_id=")}' + id //iframe的url
                    });
                }
            });
            $('.layui-btn').on('click', function () {
                var province_id = $("#province_id").val();
                var city_id     = $("#city_id").val();
                var driver_name = $("#driver_name").val();
                var driver_phone= $("#driver_phone").val();
                table.reload('DriverLator', {
                    url: "{:url('DriverLator/driverList2')}", where: {
                        "province_id": province_id,
                        "city_id": city_id,
                        "driver_name": driver_name,
                        "driver_phone": driver_phone,
                        "drivetType": 2
                    },
                });

            });
            var driverId=$("#highLight").data('value');
            setInterval(function () {
                /*table.reload('DriverLator',{
                    url:"{:url('DriverLator/driverList')}",
                    where:{
                        province_id : $("#province_id").val(),
                        city_id     : $("#city_id").val()
                    }
                });*/
                num = num+1;
                initMap(num,driverId);
            },5000);
            initMap(num,driverId);
        });
        var map;
        var markers     = [];
        function initMap(num,driverId) {
            var province_id = $("#province_id").val();
            var city_id     = $("#city_id").val();
            $.post('/admin/DriverLator/translator2', {province_id:province_id,city_id:city_id,drivetType:2}, function (res) {
                var result = JSON.parse( res );
                console.log(result)
                $('.driverNum').html(result.count);
                $('.number').html(' 人');
                var lng = result.location.lng;
                var lat = result.location.lat;
                if(map == null){
                    map = new AMap.Map('container',{
                        center: [lng,lat],
                        zoom:10,
                        resizeEnable: true
                    });
                }
                var provinces   = result.provinces;
                var url         = result.url;
                for (var i = 0, marker; i < provinces.length; i++) {
                    var marker ;
                    if(num == 1){
                        if (driverId==provinces[i].driverId){
                            var content= "<div style='background: #0C0C0C'><img src="+url+"/public/ico/xiaoche.png></div>"
                            marker = new AMap.Marker({
                                icon: url+'/public/ico/xiaoche.png',
                                position: provinces[i].center.split(','),
                                angle:provinces[i].direction,
                                content: content,
                                offset: new AMap.Pixel(-12,-12),
                                zIndex: 10,
                                title: provinces[i].name+' / '+provinces[i].driver_phone,
                                map: map
                            });
                            markers[provinces[i].driverId] = new Array();
                            markers[provinces[i].driverId].push(marker);
                        }else {
                            marker = new AMap.Marker({
                            icon: url+'/public/ico/xiaoche.png',
                            position: provinces[i].center.split(','),
                            angle:provinces[i].direction,
                            offset: new AMap.Pixel(-12,-12),
                            zIndex: 10,
                            title: provinces[i].name+' / '+provinces[i].driver_phone,
                            map: map
                        });
                            markers[provinces[i].driverId] = new Array();
                            markers[provinces[i].driverId].push(marker);
                        }

                    }else{
                        if(provinces[i].driverType == 1){
                            if(provinces[i].locationStatus == 1){
                                var marker, lineArr = [[provinces[i].old_lng,provinces[i].old_lat],[provinces[i].lng,provinces[i].lat]];

                                marker = new AMap.Marker({
                                    map: map,
                                    position: provinces[i].center.split(','),
                                    angle:provinces[i].direction,
                                    icon: url+'/public/ico/xiaoche.png',
                                    offset: new AMap.Pixel(-12,-12),
                                    zIndex: 10,
                                    //angle:-90,
                                    title: provinces[i].name+' / '+provinces[i].driver_phone + ' / '+provinces[i].direction,
                                });
                                // 绘制轨迹
                                var polyline = new AMap.Polyline({
                                    map: map,
                                    path: lineArr,
                                    showDir:true,
                                    strokeColor: "#28F",  //线颜色
                                    strokeOpacity: 0,     //线透明度
                                    strokeWeight: 0.1,      //线宽
                                    strokeStyle: "dashed" //线样式
                                });

                                var passedPolyline = new AMap.Polyline({
                                    map: map,
                                    // path: lineArr,
                                    strokeColor: "#AF5",  //线颜色
                                    strokeOpacity: 0,     //线透明度
                                    strokeWeight: 0.1      //线宽
                                    // strokeStyle: "solid"  //线样式
                                });
                                marker.on('moving', function (e) {
                                    passedPolyline.setPath(e.passedPath);
                                });
                                marker.moveAlong(lineArr, 500);
                                map.remove(markers[provinces[i].driverId]);
                                markers[provinces[i].driverId].push(marker);
                            }else if(provinces[i].locationStatus == 2){

                                marker = new AMap.Marker({
                                    icon: url+'/public/ico/xiaoche.png',
                                    position: provinces[i].center.split(','),
                                    angle:provinces[i].direction,
                                    offset: new AMap.Pixel(-12,-12),
                                    zIndex: 10,
                                    title: provinces[i].name+' / '+provinces[i].driver_phone,
                                    map: map
                                });
                                markers[provinces[i].driverId] = new Array();
                                markers[provinces[i].driverId].push(marker);
                            }
                        }else{
                            map.remove(markers[provinces[i].driverId]);
                        }
                    }
                }
                if(num == 1 || $("#province_id").val() != '' || $("#city_id").val() != ''){
                    map.setFitView();
                }
            });
        }
        //选择省市切换
        function getProvinceList(){
            $("#city_id").empty();
            $("#city_id").append('<option value=>请选择城市</option>');
            var province_id = $("#province_id").val();
            $.ajax({
                url:'{:url("/admin/Franchisee/cityList")}',
                async:true,
                //dataType:'json',
                type:'post',
                data:{'province_id':province_id},
                success:function(res){
                    $("#city_id").append(res);
                },
                error:function(e){
                    layer.msg('请求错误');return false;
                }
            })
        }
        function GetQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
    </script>
</block>
